<template>
  <div class="box">
    <div class="box1">
      <h1>使用grid布局</h1>
      <h3>基本布局</h3>
      <div class="gridbox">
        <img class="img" src="../../assets/image/t1.jpg" alt="t1">
        <img class="img" src="../../assets/image/t2.jpg" alt="t2">
        <img class="img" src="../../assets/image/t3.jpg" alt="t3">
        <img class="img" src="../../assets/image/t4.jpg" alt="t4">
        <img class="img" src="../../assets/image/t5.jpg" alt="t5">
        <img class="img" src="../../assets/image/t6.jpg" alt="t6">
        <img class="img" src="../../assets/image/t7.jpg" alt="t7">
        <img class="img" src="../../assets/image/t8.jpg" alt="t8">
        <img class="img" src="../../assets/image/t9.jpg" alt="t9">
      </div>
      <h3>repeat,此布局不用设置row和height</h3>
      <div class="gridbox2">
        <img class="img" src="../../assets/image/t1.jpg" alt="t1">
        <img class="img" src="../../assets/image/t2.jpg" alt="t2">
        <img class="img" src="../../assets/image/t3.jpg" alt="t3">
        <img class="img" src="../../assets/image/t4.jpg" alt="t4">
        <img class="img" src="../../assets/image/t5.jpg" alt="t5">
        <img class="img" src="../../assets/image/t6.jpg" alt="t6">
        <img class="img" src="../../assets/image/t7.jpg" alt="t7">
        <img class="img" src="../../assets/image/t8.jpg" alt="t8">
        <img class="img" src="../../assets/image/t9.jpg" alt="t9">
      </div>
      <h3>auto-fill自动换行,此布局不用设置row和height</h3>
      <div class="gridbox3">
        <img class="img" src="../../assets/image/t1.jpg" alt="t1">
        <img class="img" src="../../assets/image/t2.jpg" alt="t2">
        <img class="img" src="../../assets/image/t3.jpg" alt="t3">
        <img class="img" src="../../assets/image/t4.jpg" alt="t4">
        <img class="img" src="../../assets/image/t5.jpg" alt="t5">
        <img class="img" src="../../assets/image/t6.jpg" alt="t6">
        <img class="img" src="../../assets/image/t7.jpg" alt="t7">
        <img class="img" src="../../assets/image/t8.jpg" alt="t8">
        <img class="img" src="../../assets/image/t9.jpg" alt="t9">
      </div>
      <h3>fr关键字</h3>
      <el-input-number v-model="frNum" :min="1" :max="9" label="fr" style="margin-bottom:.125rem;"></el-input-number>
      <div class="gridbox4">
        <img class="img" src="../../assets/image/t1.jpg" alt="t1">
        <img class="img" src="../../assets/image/t2.jpg" alt="t2">
        <img class="img" src="../../assets/image/t3.jpg" alt="t3">
        <img class="img" src="../../assets/image/t4.jpg" alt="t4">
        <img class="img" src="../../assets/image/t5.jpg" alt="t5">
        <img class="img" src="../../assets/image/t6.jpg" alt="t6">
        <img class="img" src="../../assets/image/t7.jpg" alt="t7">
        <img class="img" src="../../assets/image/t8.jpg" alt="t8">
        <img class="img" src="../../assets/image/t9.jpg" alt="t9">
      </div>
      <h3>布局的好帮手</h3>
      <div class="bj">
        <div class="c1" style="background-color: #abd759;"></div>
        <div class="c1" style="background-color: #65ad8b;"></div>
      </div>
      <h3>十二网格布局</h3>
      <div class="bj2">
        <div class="c1" style="background-color: #abd759;"></div>
        <div class="c1" style="background-color: #65ad8b;"></div>
        <div class="c1" style="background-color: #5786a5;"></div>
        <div class="c1" style="background-color: #87ace2;"></div>
        <div class="c1" style="background-color: #9ddb84;"></div>
        <div class="c1" style="background-color: #e78061;"></div>
      </div>
      <h3>grid-auto-flow 属性，grid-auto-flow默认是row,只看行</h3>
      <div class="bj3">
        <div class="c1 item-1" style="background-color: #abd759;">1</div>
        <div class="c1 item-2" style="background-color: #65ad8b;">2</div>
        <div class="c1 item-3" style="background-color: #5786a5;">3</div>
        <div class="c1 item-4" style="background-color: #87ace2;">4</div>
        <div class="c1 item-5" style="background-color: #9ddb84;">5</div>
        <div class="c1 item-6" style="background-color: #a9938d;">6</div>
        <div class="c1 item-7" style="background-color: #d175ba;">7</div>
        <div class="c1 item-8" style="background-color: #e78061;">8</div>
        <div class="c1 item-9" style="background-color: #ab77ce;">9</div>
      </div>
      <h3>grid-auto-flow 属性，grid-auto-flow：column，只看列</h3>
      <div class="bj4 gridAutoFlowColumn">
        <div class="c1 item-1" style="background-color: #abd759;">1</div>
        <div class="c1 item-2" style="background-color: #65ad8b;">2</div>
        <div class="c1 item-3" style="background-color: #5786a5;">3</div>
        <div class="c1 item-4" style="background-color: #87ace2;">4</div>
        <div class="c1 item-5" style="background-color: #9ddb84;">5</div>
        <div class="c1 item-6" style="background-color: #a9938d;">6</div>
        <div class="c1 item-7" style="background-color: #d175ba;">7</div>
        <div class="c1 item-8" style="background-color: #e78061;">8</div>
        <div class="c1 item-9" style="background-color: #ab77ce;">9</div>
      </div>
      <h3>grid-auto-flow 属性，grid-auto-flow：row dense，先行后列</h3>
      <div class="bj4 gridAutoFlowRowDense">
        <div class="c1 item-1" style="background-color: #abd759;">1</div>
        <div class="c1 item-2" style="background-color: #65ad8b;">2</div>
        <div class="c1 item-3" style="background-color: #5786a5;">3</div>
        <div class="c1 item-4" style="background-color: #87ace2;">4</div>
        <div class="c1 item-5" style="background-color: #9ddb84;">5</div>
        <div class="c1 item-6" style="background-color: #a9938d;">6</div>
        <div class="c1 item-7" style="background-color: #d175ba;">7</div>
        <div class="c1 item-8" style="background-color: #e78061;">8</div>
        <div class="c1 item-9" style="background-color: #ab77ce;">9</div>
      </div>
      <h3>grid-auto-flow 属性，grid-auto-flow：column dense，先列后行</h3>
      <div class="bj4 gridAutoFlowColumnDense">
        <div class="c1 item-1" style="background-color: #abd759;">1</div>
        <div class="c1 item-2" style="background-color: #65ad8b;">2</div>
        <div class="c1 item-3" style="background-color: #5786a5;">3</div>
        <div class="c1 item-4" style="background-color: #87ace2;">4</div>
        <div class="c1 item-5" style="background-color: #9ddb84;">5</div>
        <div class="c1 item-6" style="background-color: #a9938d;">6</div>
        <div class="c1 item-7" style="background-color: #d175ba;">7</div>
        <div class="c1 item-8" style="background-color: #e78061;">8</div>
        <div class="c1 item-9" style="background-color: #ab77ce;">9</div>
      </div>
      <h3>justify-items:水平位置,align-items：垂直位置，</h3>
      <h3>
        start：对齐单元格的起始边缘。
        end：对齐单元格的结束边缘。
        center：单元格内部居中。
        stretch：拉伸，占满单元格的整个宽度（默认值）。
      </h3>
      <div class="bj5">
        <div class="c1" style="background-color: #abd759;">1</div>
        <div class="c1" style="background-color: #65ad8b;">2</div>
        <div class="c1" style="background-color: #5786a5;">3</div>
        <div class="c1" style="background-color: #87ace2;">4</div>
        <div class="c1" style="background-color: #9ddb84;">5</div>
        <div class="c1" style="background-color: #a9938d;">6</div>
        <div class="c1" style="background-color: #d175ba;">7</div>
        <div class="c1" style="background-color: #e78061;">8</div>
        <div class="c1" style="background-color: #ab77ce;">9</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      frNum: 3
    };
  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  methods: {

  },
};
</script>
<style scoped>
.box {
  /* margin: .125rem; */
  background-color: v-bind(bgColor);
  /* width: 100%; */
  padding: .25rem;
}

h3 {
  margin-top: .25rem;
}

.img {
  width: 100%;
  height: 100%;
}

.gridbox {
  display: grid;
  width: 6.25rem;
  height: 6.25rem;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}



.gridbox2 {
  display: grid;
  width: 6.25rem;
  /* height: 6.25rem; */
  grid-template-columns: repeat(2, 100px 20px 100px);
  /* grid-template-rows: repeat(2, 100px 100px); */
}

.gridbox3 {
  display: grid;
  width: 6.25rem;
  /* height: 1.25rem; */
  grid-template-columns: repeat(auto-fill, 1.25rem);
}

.gridbox4 {
  display: grid;
  width: 6.25rem;
  /* height: 1.25rem; */
  grid-template-columns: repeat(v-bind(frNum), 1fr);
  gap: .125rem;
}

.bj {
  width: 5rem;
  height: 6.25rem;
  display: grid;
  grid-template-columns: 70% 30%;
}

.bj2 {
  width: 5rem;
  height: 6.25rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: .125rem;
  /* row-gap: .125rem; */
}

.bj3 {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  /* grid-area: 'a b c'
    'd e f'
    'g h k'; */

}

.gridAutoFlowColumn {
  grid-auto-flow: column;
}

.gridAutoFlowRow {
  grid-auto-flow: row;
}

.gridAutoFlowRowDense {
  grid-auto-flow: row dense;
}

.gridAutoFlowColumnDense {
  grid-auto-flow: column dense;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.bj4 {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  /* grid-area: 'a b c'
    'd e f'
    'g h k'; */
}
.bj5{
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  justify-items: center;
  align-items: center;
}
.c1{
  /* width: 100%;
  height: 100%; */
}


</style>